<template>
    <button 
        class="el-button"
        :class="[type ? 'el-button--' + type : '',
        size ? 'el-button--' + size : '',
         {
            'is-plain': plain,
            'is-round': round,
            'is-circle': circle,
            'is-disabled': disabled,
            'is-loading': loading,
        }]"
        :autofocus="autofocus"
        :disabled="disabled || loading"
        @click="handleClick"
    >
        <el-i class="el-icon-loading" v-if="loading"></el-i>
        <el-i :class="icon" v-if="icon && !loading"></el-i>
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>

<script>
import ElI from '../Icon/index'

export default {
    name: 'Button',
    props: {
        type: {
            type: String,
            default: 'default',
        },
        size: String,
        plain: Boolean,
        round: Boolean,
        circle: Boolean,
        icon: {
            type: String,
            default: ''
        },
        autofocus: Boolean,
        disabled: Boolean,
        loading: Boolean,
    },
    methods: {
        handleClick(evt) {
            this.$emit('click', evt);
        }
    },
    components: {
        ElI,
    }
}
</script>